<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style type="text/css">
        body {
            -webkit-overflow-scrolling: touch;
        }

        html,
        body {
            overflow-x: hidden;
        }

        .aui-slide-page-active {
            background: #fff;
            width: .8rem;
            border-radius: 3px;
        }

        img.icon {
            display: block;
            margin: .1rem auto;
            width: 1.2rem
        }

        .aui-grid [class*=aui-col-] {
            padding: 0;
        }

        .aui-grid-label {
            font-size: .64rem !important;
        }

        .aui-grid .aui-grid-label {
            margin-top: 0;
            font-size: 0.25rem !important;
        }

        .goTop {
            position: fixed;
            right: 1rem;
            width: 2.5rem;
            height: 2.5rem;
            bottom: 2.5rem;
            z-index: 99;
            border-radius: 50%;
            color: white;
            text-align: center;
            padding-top: 0.3rem;
            background: url(../image/newImg/goto@3x.png) no-repeat 0 0;
            background-size: 100% 100%;
            /*display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;align-items:center;-webkit-align-items: center;opacity: 0.5;flex-direction:row;opacity: 0.5;background: #000;*/
        }

        .aui-padded-b-10 {
            padding-bottom: 0.25rem !important;
        }

        .hide {
            display: none;
        }

        /*.goTop i{
     	position: relative;
     }*/
        /*.goTop span{display: block;margin-top: -10px;}*/
        .tb_price {
            color: #FE417A;
            font-size: 0.5rem;
        }

        .tb_price .tb_price_new:before {
            content: "￥";
            color: #FE417A;
            font-size: 0.5rem;
            font-weight: normal;
            display: inline-block;
        }

        .tb_price .tb_price_new {
            font-size: 0.75rem;
            color: #FE417A;
            display: inline-block;
        }

        .tb_zt_con {
            padding: 0
        }

        .tb_price span {
            font-size: 0.5rem;
        }

        .aui-padded-10 {
            padding: 0 1rem !important
        }

        .tb_zt_con .aui-list .aui-list-item {
            padding: 0
        }

        .aui-list .aui-list-item-title {
            font-size: 1.4rem
        }

        .ta_num {
            height: 2.2rem;
            margin: 0;
            background: white;
            text-align: center;
            color: #333333;
            font-size: 0.80rem;
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            border-top: 1px solid #eee;
        }

        .ta_num img {
            width: 0.6125rem;
            display: inline-block;
            margin-right: 0.3rem;
            height: 0.6125rem;
        }

        .ta_num .c_c {
            color: #FE417A;
        }

        .animate {
            width: 100%;
            height: 4.5rem;
            background: url(../image/newImg/go_bg.png) no-repeat 0 0;
            background-size: 100% 100%;
            margin: 0.25rem 0;
            overflow: hidden;
        }

        .animate a {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .animate a div.xq {
            position: absolute;
            right: 1.25rem;
            top: 1.15rem;
        }

        .animate div.xq .bigGo {
            float: left;
            width: 2.4rem;
        }

        .animate div.xq img {
            animation: swing 5s .15s linear infinite;
            -webkit-animation: swing 5s .15s linear infinite;
        }

        .animate .xh {
            position: absolute;
            top: 0;
            animation: xhani 7.5s .15s linear infinite;
            -webkit-animation: xhani 7.5s .15s linear infinite;
            width: 0.3rem;
            height: 0.3rem
        }

        .animate .xh_ani {
            left: 0.8rem
        }

        .animate .xh_ani_2 {
            position: absolute;
            top: 0;
            left: 1rem;
            animation: xhani 5s .15s linear infinite;
            -webkit-animation: xhani 5s .15s linear infinite;
            width: 0.5rem;
            height: 0.5rem
        }

        .animate .xh_ani_3 {
            position: absolute;
            top: 0;
            right: 1rem;
            animation: xhani 5.5s .15s linear infinite;
            -webkit-animation: xhani 5.5s .15s linear infinite;
            width: 0.4rem;
            height: 0.4rem
        }

        .animate .xh_ani_4 {
            position: absolute;
            top: 0;
            right: 0.8rem;
            animation: xhani 8s .15s linear infinite;
            -webkit-animation: xhani 8s .15s linear infinite;
            width: 0.35rem;
            height: 0.35rem
        }

        /*动画*/
        @-webkit-keyframes swing {
            10% {
                transform: rotate(15deg);
            }

            20% {
                transform: rotate(-10deg);
            }

            30% {
                transform: rotate(5deg);
            }

            40% {
                transform: rotate(-5deg);
            }

            50%,
            100% {
                transform: rotate(0deg);
            }
        }

        @keyframes swing {
            10% {
                transform: rotate(15deg);
            }

            20% {
                transform: rotate(-10deg);
            }

            30% {
                transform: rotate(5deg);
            }

            40% {
                transform: rotate(-5deg);
            }

            50%,
            100% {
                transform: rotate(0deg);
            }
        }

        /*雪花*/
        @-webkit-keyframes xhani {
            10% {
                top: 0
            }

            20% {
                top: 10%
            }

            30% {
                top: 30%
            }

            40% {
                top: 40%
            }

            100% {
                top: 100%
            }
        }

        @keyframes xhani {
            10% {
                top: 0
            }

            20% {
                top: 10%
            }

            30% {
                top: 30%
            }

            40% {
                top: 40%
            }

            100% {
                top: 100%
            }
        }

        .gg_box_2 {
            background: white;
            display: flex;
            display: -webkit-flex;
            margin: 0.25rem 0
        }

        .gg_box_2>div {
            flex: 1;
            -webkit-flex: 1;
        }

        .gg_box_2 img {
            width: 100%
        }

        .gg_box_2 .gg_box_R {
            display: flex;
            display: -webkit-flex;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        .gg_box_2 .b_l {
            border-left: 1px solid #EEEEEE;
            border-bottom: 1px solid #eee;
            flex: 1;
            -webkit-flex: 1;
        }

        .gg_box_2 .b_l:last-child {
            border-bottom: 0
        }

        .gg_box_3 {
            background: white;
            display: flex;
            display: -webkit-flex;
            margin: 0.2rem 0;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }

        .gg_box_3>div {
            width: 50%;
        }

        .gg_box_3 img {
            width: 100%
        }

        .gg_box_3 .br {
            border-right: 1px solid #EEEEEE;
        }

        .gg_box_3 .bb {
            border-bottom: 1px solid #eee;
        }

        .jrTitle {
            display: flex;
            display: -webkit-flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            background: white;
            padding: 0 0.6rem;
            -webkit-align-items: center;
            align-items: center;
            height: 1.5rem;
            -webkit-align-items: center;
            align-items: center;
            border-bottom: 1px solid #eee;
        }

        .jrTitle b {
            padding-left: 0.1rem;
            border-left: 0.05rem solid #FF54C7;
            color: #333;
            font-size: 0.7rem;
        }

        .jrTitle span {
            color: #999;
            font-size: 0.6rem;
        }

        .jrTitle span i {
            color: #999;
            font-size: 0.6rem;
        }

        .aui-slide-page-dot {
            background: white;
        }

        .aui-slide-page-active {
            background: #FF54C7;
        }

        .aui-padded-t-10 {
            padding-top: 0.1rem !important
        }

        .grid_item_all {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            padding: .5rem;
            background: #fff;
        }

        .grid_item_all .aui-grid-label {
            font-size: 0.6rem
        }

        .grid_item_all>div {
            padding-bottom: .5rem;
            width: 20%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;
        }

        .grid_item_all>div img {
            width: 60%;
        }

        .text_lint_2 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .more_plate {
            width: 100%;
            height: 190px;
            margin-top: 5px;
            margin-bottom: 5px;
            background: #fff;
        }

        .more_plate .more_title {
            height: 25px;
            line-height: 20px;
            font-size: 12px;
            padding: 0 10px;
            color: #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .more_plate .more_list {
            padding: 10px;
            overflow: hidden;
            overflow-x: auto;
            white-space: nowrap;
            background: #fff;
        }

        .more_plate .more_list .more_list_item {
            height: 140px;
            width: 140px;
            margin-right: 5px;
            border-radius: 10px;
            border: 1px solid #e8e8e8;
            overflow: hidden;
            display: inline-block;
        }

        .more_plate .more_list .more_list_item .more_list_item_top_img {
            width: 100%;
            height: 100px;
            overflow: hidden;
            object-fit: cover;
        }

        .more_list_item_text {
            margin-top: 7px;
            height: 26px;
            line-height: 26px;
            display: flex;
            justify-content: space-around;
            font-size: 16px;
            color: #FF69B4;
        }

        .more_text {
            padding-left: 3px;
            font-size: 16px;
            color: #000;
            display: flex;
            align-items: center;
        }

        .more_text .title_img {
            width: 12px;
            height: 12px;
            margin-right: 3px;
        }

        .more_list_item_text .more_list_item_sing {
            font-size: 14px;
            line-height: 26px;
            padding: 0 5px;
            border-radius: 5px;
            color: #fff;
            background: #FF69B4;
        }
    </style>
</head>

<body class="">
    <div class="goTop hide" id="goTop" onClick="goTop()"></div>
    <div id="html">
    </div>
    <!-- hteml end -->
    <!--<div class="more_plate">
        <div class="more_title">
            <span class="more_text">
                <img class="title_img" src="../image/hour24.png" />
                24小时热销榜</span>
            <span onclick="goToMore('good_coupons_win')">更多<i class="aui-iconfont aui-icon-right"></i></span>
        </div>
        <div class="more_list" id="24hour">
        </div>
    </div>
    <div class="more_plate">
        <div class="more_title">
            <span class="more_text">
                <img class="title_img" src="../image/jiukuaijiu.png" />
                9.9包邮</span>
            <span onclick="goToMore('nine_nine_win')">更多<i class="aui-iconfont aui-icon-right"></i></span>
        </div>
        <div class="more_list" id="ninenine">
        </div>
    </div>
    <div class="more_plate">
        <div class="more_title">
            <span class="more_text">
                <img class="title_img" src="../image/quanqiugouwu.png" />
                全球购物嗨翻天</span>
            <span onclick="goToMore('video_guide_win')">更多<i class="aui-iconfont aui-icon-right"></i></span>
        </div>
        <div class="more_list" id="allhi">
        </div>
    </div>
    <!-- 热卖 -->

    <div class="rm_bar" id="goods">
        <!-- 热卖列表 -->
        <div class="rm_con">
            <div class="tb_zt_con">
                <ul class="aui-list aui-media-list" id="list">
                </ul>
            </div>
        </div>
        <!-- 热卖列表end -->
    </div>
    <!-- 热卖 end -->
    <div class="nbsp"></div>
</body>
<!-- <script type="text/javascript" src="../script/rem.js" ></script> -->
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    var renderListItem;
    var p = 0,
        id = 0;
    var w = window.screen.height;
    apiready = function () {
        renderListItem = doT.template($api.text($api.byId('renderListItem')));

        api.parseTapmode();
        //下拉刷新
        _Refresh(function () {
            layout();
            getData(id);
        });;

        //滚动监听
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 100 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function (ret, err) {
            getData(id);
        });

        //init
        layout();
        getData(id);
        getNine();
        get24Hour();
        getAllHi();
    }
    // 监听滚动条
    window.onscroll = function () {
        var h = $(window).scrollTop();
        if (h >= (w - 300)) {
            $("#goTop").removeClass("hide");
        } else if (h == 0) {
            $("#goTop").addClass("hide");
        }

    }
    // 返回顶部
    function goTop() {
        $("body").scrollTop(0)
    }

    function goToMore(item) {
        var name = item;
        var url = './' + item + '.html'
        api.openWin({
            name: name,
            url: url,
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {}
        });
    }

    function getNine() {
        var urlTransform = window.urlTransformZGD(window.APIServerZGD.NineNine, {
            keywordVal: '', //关键词
            sortVal: '', //排序类型
            min_idVal: '', //分页
            typeVal: '2', //类别 9.9 为 2
            backVal: '10', //分页条目
        })
        _Ajax(urlTransform, 'get', {}, 'json', function (ret) {
            if (ret.code === 1) {
                var _data = ret.data
                for (var i = 0; i < _data.length; i++) {
                    _data[i].item_id = _data[i].itemid
                    _data[i].is_tmall = _data[i].shoptype == 'B' ? '1' : '0'
                }
                $api.html($api.byId('ninenine'), renderListItem(_data));
            } else {
                $api.html($api.byId('ninenine'), '');
            }
        });
    }

    function get24Hour() {
        var urlTransform = window.urlTransformZGD(window.APIServerZGD.VideoGuide, {
            typeVal: '10', //类别
            backVal: '10', //分页条目
            sortVal: '0',
            cidVal: '1',
            min_idVal: '1'
        })
        _Ajax(urlTransform, 'get', {}, 'json', function (ret) {
            if (ret.code === 1) {
                var _data = ret.data
                for (var i = 0; i < _data.length; i++) {
                    _data[i].item_id = _data[i].itemid
                    _data[i].is_tmall = _data[i].shoptype == 'B' ? '1' : '0'
                }
                $api.html($api.byId('24hour'), renderListItem(_data));
            } else {
                $api.html($api.byId('24hour'), '');
            }
        });
    }

    function getAllHi() {
        var urlTransform = window.urlTransformZGD(window.APIServerZGD.NineNine, {
            keywordVal: '1', //关键词
            sortVal: '', //排序类型
            min_idVal: '', //分页
            typeVal: '2', //类别 9.9 为 2
            backVal: '10', //分页条目
        })
        _Ajax(urlTransform, 'get', {}, 'json', function (ret) {
            if (ret.code === 1) {
                var _data = ret.data
                for (var i = 0; i < _data.length; i++) {
                    _data[i].item_id = _data[i].itemid
                    _data[i].is_tmall = _data[i].shoptype == 'B' ? '1' : '0'
                }

                $api.html($api.byId('allhi'), renderListItem(_data));
            } else {
                $api.html($api.byId('allhi'), '');
            }
        });
    }

    function numRunFun(num, maxNum, ele) {
        var numBox = document.getElementById(ele);
        if (!numBox) {
            return false;
        }
        var num = num;
        var maxNum = maxNum;
        var timer = setInterval(function () {
            num += 100; // 调节速度
            if (num >= maxNum) {
                numBox.innerHTML = maxNum;
                clearInterval(timer);
            } else {
                numBox.innerHTML = ~~(num);
            }
        }, 5); // 也可以调节速度
    }
    // 返回顶部
    /*function goTop(){
      $("body").scrollTop(0)
    }*/
    //旧返回top edit by alison
    //首页布局
    function layout() {
        //_loading2();
        _Ajax(window.APIServer.IndexLayout, 'get', '', 'json', function (ret) {
            //_loading2_close();
            //.渲染页面
            if (ret.code) {
                $('#html').html(ret.data.html);
                // setTimeout(slide(),3000);
                slide();
                // refreshRem();
                numRunFun(0, 73920, "n_num_1");
                numRunFun(0, 4849, "n_num_2");
            } else {
                //do nothing
            }

        }, '', '', true);

    }

    function slide() {
        var slide = new auiSlide({
            container: document.getElementById("aui-slide"),
            // "width":300,
            "height": 150,
            "speed": 300,
            "pageShow": true,
            "pageStyle": 'dot',
            "loop": true,
            'dotPosition': 'center',
            "autoPlay": 3000, //自动播放
        })
    }
    //获取淘宝本地商品
    function getData(sid, nav) {
        if (nav) {
            p = 0;
            id = sid;
            location.href = "#goods";
        }
        p++;
        //$('body').append('<div class="loading-1"><img src="../image/load-1.gif">加载中...</div>');
        _loading2();
        _Ajax(window.APIServer.SectionGoods, 'post', {
            values: {
                id: sid,
                p: p
            }
        }, 'json', function (ret) {
            _loading2_close();
            //$('.loading-1').remove();
            //.渲染页面
            if (ret.code == 1) { //alert(JSON.stringify(ret.data))
                var evalText = doT.template($api.text($api.byId('goodslist')));
                if (nav) {
                    $api.html($api.byId('list'), evalText(ret.data));
                } else {
                    $api.append($api.byId('list'), evalText(ret.data));
                }
                imageCache('.goods_img');
            } else {
                p--;
                $('.loading-1').remove();
                $('body').append('<div class="loading-1">' + ret.msg + '</div>');
            }

        })
    }
</script>

<script id="renderListItem" type="text/x-dot-template">
    {{ for (var key in it){ }}
        <div class="more_list_item" onclick='open_goods({{= JSON.stringify( it[key] ) }})'>
            <img class="more_list_item_top_img" src={{= it[key]['itempic'] }} />
            <div class="more_list_item_text">
                <span class="more_list_item_money">¥{{= it[key]['itemendprice']}}</span>
                <span class="more_list_item_sing">券后价</span>
            </div>
        </div>
    {{ } }}
  </script>

<script id="goodslist" type="text/x-dot-template">
    {{ for (key in it.data){ }}
{{ var param=it['data'][key];param.win_name = 'guess'+'_'+it['data'][key]['item_id']; }}
<li class="aui-list-item aui-col-xs-6" onclick='open_goods({{= JSON.stringify(param) }})' tapmode>
  <div class="aui-list-item-inner" style="background: white;border-bottom:1px solid #f5f5f5;border-right:1px solid #f5f5f5;padding: 0.1rem 0;overflow:hidden">
      <div class="aui-row aui-row-padded" style="position:relative">
        <div class="aui-padded-10" style="padding:0.5rem !important">
         <img class="goods_img" src="../image/faleimg.gif" _src="{{= it['data'][key]['pic'] }}">
        </div>
         <div class="aui-row aui-padded-10" style="position:absolute;width: 100%;left: 0; background: #FFEBF0;bottom: 0;color:#FE417A;font-size:0.6rem;height:0.9rem;line-height:0.9rem;">领券减{{= it['data'][key]['quan_price'] }}</div>
      </div>
      <div class="aui-list-item-title aui-padded-t-10 aui-ellipsis-2 text_lint_2" style="padding:0 .27rem 0 .8rem;font-size:0.7rem;line-height:1.07rem;height:2.16rem;">{{= it['data'][key]['short_title'] }}</div>
      <div class="tb_zt_textbottom" style="padding:0 0.8rem;line-height: 0.8rem">
          <div class="tb_price">券后<div class="tb_price_new">{{= it['data'][key]['price_after_quan'] }}</div><span>￥{{= it['data'][key]['price'] }}</span></div>
      </div>
  </div>
</li>
{{ } }}
</script>

</html>
